<template>
  <!-- 头部 -->
  <div class="header">
    <div class="top">
      <div class="header-top contentImp">
        <!-- 左边切换城市 -->
        <div class="location">
          <span> <span class="iconfont icon-dingwei"> </span>深圳</span>
          <a class="changebutton" href="">切换城市</a>
          <div class="changecity">
            <span>[</span>
            <a class="local" href="">香港</a>
            <a class="local" href="">谢岗镇</a>
            <a class="local" href="">惠阳</a>
            <span>]</span>
          </div>
          <div class="location-login" v-if="show">
            <a @click="goLogin" style="color: #fe8c00">立即登录</a>
            <a @click="goRegister" class="location-register">注册</a>
          </div>
          <div class="location-login" v-else>
            <a @click="goLogin" style="color: #fe8c00">{{ phone }}</a>
            <a @click="goOut" class="location-register">退出</a>
          </div>
        </div>
        <!-- 右边导航 -->
        <div class="nav">
          <ul class="headerSecond">
            <!-- 1 -->
            <li class="myMt" @click.self="goPersonal('meiTuan')">
              我的美团
              <ul class="myMtList">
                <li @click.self="goPersonal('myOrder')">我的订单</li>
                <li @click.self="goPersonal('Collection')">我的收藏</li>
                <li @click.self="goPersonal('Voucher')">抵用券</li>
                <li @click.self="goPersonal('UserInfo')">账号设置</li>
              </ul>
            </li>
            <!-- 2 -->
            <li class="phoneApp">手机APP</li>
            <!-- 3 -->
            <li class="cooperation">
              商家中心
              <ul class="cooperationList">
                <li>美团餐饮商户中心</li>
                <li>登录商家中心</li>
                <li>美团智能收银</li>
                <li>我想合作</li>
                <li>手机免费开店</li>
                <li>到店综合业务招募</li>
                <li>餐饮合作商招募</li>
                <li>商家申请开票</li>
                <li>免费合作美团排队</li>
              </ul>
            </li>
            <!-- 4 -->
            <li class="rules">
              美团规则
              <ul class="rulesList">
                <li>规则中心</li>
                <li>规则目录</li>
                <li>规则评议院</li>
              </ul>
            </li>
            <!-- 5 -->
            <li class="nav">
              网站导航
              <div class="navList">
                <!-- 1 -->
                <dl class="jiudian">
                  <dt>酒店旅游</dt>
                  <div>
                    <dd>国际机票</dd>
                    <dd>经济型酒店</dd>
                    <dd>公寓</dd>
                    <dd>青年旅舍</dd>
                    <dd>农家院</dd>
                    <dd>火车票</dd>
                    <dd>主题酒店</dd>
                    <dd>豪华酒店</dd>
                    <dd>度假酒店</dd>
                    <dd>民宿</dd>
                    <dd>商务酒店</dd>
                    <dd>客栈</dd>
                    <dd>别墅</dd>
                  </div>
                </dl>
                <!-- 2 -->
                <dl class="meishi">
                  <dt>吃美食</dt>
                  <div>
                    <dd>烤鱼</dd>
                    <dd>特色小吃</dd>
                    <dd>烧烤</dd>
                    <dd>自助餐</dd>
                    <dd>火锅</dd>
                    <dd>代金券</dd>
                  </div>
                </dl>
                <!-- 3 -->
                <dl class="dianying">
                  <dt>看电影</dt>
                  <div>
                    <dd>热门电影</dd>
                    <dd>热门影院</dd>
                    <dd>热门电影口碑榜</dd>
                    <dd>最受期待电影</dd>
                    <dd>国内票房榜</dd>
                    <dd>北美票房榜</dd>
                    <dd>电影排行榜</dd>
                  </div>
                </dl>
                <!-- 4 -->
                <dl class="poneApp">
                  <dt>手机应用</dt>
                  <div>
                    <dd>
                      <a href=""
                        ><img src="../../assets/images/meituan.png"
                      /></a>
                    </dd>
                    <dd>
                      <a href=""
                        ><img src="../../assets/images/waimai.png"
                      /></a>
                    </dd>
                    <dd>
                      <a href=""
                        ><img src="../../assets/images/dianping.png"
                      /></a>
                    </dd>
                    <dd>
                      <a href=""
                        ><img src="../../assets/images/dianping.png"
                      /></a>
                    </dd>
                    <dd>
                      <a href=""
                        ><img src="../../assets/images/download.png"
                      /></a>
                    </dd>
                  </div>
                </dl>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- search部分 -->
    <!-- search左边 -->
    <div class="header-content">
      <div class="content contentImp">
        <div class="logo" @click="goHome">
          <img src="../../assets/images/ia_200000000.png" />
        </div>
        <!-- 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 -->
        <!-- 搜索右边 -->
        <div class="search">
          <input
            class="search-input"
            type="text"
            placeholder="搜索商家或地点"
            @click="showList"
            @keyup="change"
            @blur="inputBlur"
            v-model.trim="inputtext"
          />
          <button class="button">
            <span class="iconfont icon-sousuo"></span>
          </button>
          <div class="searchList" :class="{ show: showFlag }" v-if="arr.length">
            <ul class="searchList-ul">
              <li v-for="(item, index) in arr" :key="index" @click="toFooter">
                {{ item.editorWord }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted } from "vue";
export default defineComponent({
  name: "header",
});
</script>

<script setup>
import { ref } from "vue";
import { searchApi } from "@/axios/myaxios";
import router from "../../router";

const show = ref(true);
const phone = ref("");
// 获取到输入框输入的内容
const inputtext = ref("");
// 获取到数据的数据列表
const arr = ref([]);

onMounted(() => {
  // console.log(localStorage.getItem("user"));
  // 只能根据键来找 localstorage的数据
  if (localStorage.getItem("user")) {
    show.value = false;
    // 对象的键是唯一的
    phone.value = JSON.parse(localStorage.getItem("user")).phone;
    // console.log(phone);
  } else {
    show.value = true;
  }
});

// 点击退出删除localstorage的数据
const goOut = () => {
  localStorage.removeItem("user");
  show.value = true;
};
const showFlag = ref(false);

const showList = () => {
  showFlag.value = true;
};
const inputBlur = () => {
  setTimeout(() => {
    showFlag.value = false;
  }, 500);
};
// 点击搜索出来的商品跳转到footer
const toFooter = () => {
  console.log(1);
  router.push("/foodinfolist");
};

// 输入框输入内容时触发
const change = async () => {
  if (!inputtext.value) return;
  const res = await searchApi(inputtext.value);
  console.log(res);
  arr.value = res.data.data.suggestItems;
};

const goHome = () => {
  router.push("/");
};
const goPersonal = (page) => {
  console.log(page);
  router.push({
    path: "/personal",
    query: {
      page,
    },
  });
};
const goRegister = () => {
  router.push("/register");
};
const goLogin = () => {
  router.push("/login");
};
</script>

<style scoped>
.contentImp {
  width: 1200px !important;
  margin: 0 auto;
}
.top {
  width: 100%;
  background: #f8f8f8;
}
.header {
  font-size: 12px;
  margin: 0 auto;
  height: 200px;
}
a {
  color: #999;
  text-decoration: none;
}
.header .header-top {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 1190px;
  color: #999;
}
.header .header-top .location {
  height: 40px;
  display: flex;
  align-items: center;
}
/* 改变城市按钮 */
.header .header-top .location .changebutton {
  margin: 0 4px;
  padding: 0 2px;
  color: #666;
  background: #f4f4f4;
  border: 1px solid #e5e5e5;
}
.header .header-top .location .changecity {
  margin: 0 2px;
}
.header .header-top .location .changecity .local {
  margin: 0 3px;
}
.location-login {
  margin-left: 18px;
}
.location-register {
  margin-left: 10px;
}
.header .top {
  height: 40px;
}
.header .nav li ul {
  line-height: 40px;
}
.header .nav ul {
  list-style: none;
}
.header-top > .nav .headerSecond {
  display: flex;
}
.header-top > .nav .headerSecond > li {
  padding: 12px 14px;
}

/* content 部分 */
.content {
  width: 1190px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.header-content {
  height: 150px;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0px 10px 20px 0px rgb(0 0 0 / 10%);
}
.header-content .logo {
  cursor: pointer;
  width: 280px;
  height: 120px;
  display: flex;
  align-items: center;
}
.header-content .logo img {
  width: 126px;
  height: 46px;
}
.search {
  display: flex;
  margin-left: 35px;
  width: 550px;
  height: 40px;
  position: relative;
}
.searchList .searchList-ul li {
  font-size: 12px;
  height: 25px;
  padding-left: 12px;
  line-height: 25px;
  cursor: pointer;
}
.searchList .searchList-ul li:hover {
  color: #fe8c00;
  background-color: rgba(218, 208, 208, 0.774);
}
.search .search-input {
  position: relative;
  padding-left: 10px;
  font-size: 14px;
  width: 480px;
  border: 1px solid rgb(229, 229, 229);
  border-right: none;
  border-radius: 5px 0 0 5px;
  outline: none;
  box-sizing: border-box;
}
/* 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 */
.searchList {
  position: absolute;
  top: 40px;
  width: 470px;
  background-color: rgb(255, 255, 255);
  z-index: 99999999;
  display: none;
  min-height: 10px;
  border-radius: 0 0 7px 7px;
}
.show {
  box-shadow: 0 3px 5px 0 rgba(61, 61, 61, 0.473);
  display: block;
}

.search .button {
  width: 80px;
  background: #ffc300;
  border: none;
  outline: none;
  border-radius: 0 5px 5px 0;
  display: inline;
}
.icon-sousuo {
  font-size: 25px;
}
/* 导航下拉 */
/* 1 */
.nav ul li {
  text-align: center;
}
.nav .myMt {
  position: relative;
  cursor: pointer;
}
.nav .myMtList {
  width: 100%;
  display: none;
  position: absolute;
  z-index: 10;
  top: 40px;
  left: 0;
}
.nav .myMtList li {
  text-align: center;
}
.nav .myMt:hover,
.nav .cooperation:hover,
.nav .rules:hover,
.nav .nav:hover {
  background-color: #fff;
  border-color: #e5e5e5;
  box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
}
.nav .myMt:hover .myMtList,
.nav .cooperation:hover .cooperationList,
.nav .rules:hover .rulesList,
.nav .nav :hover .navList {
  background-color: #fff;
  border-color: #e5e5e5;
  box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
  display: block;
}

/* 3 */
.nav .cooperationList {
  display: none;
  width: 140%;
}
.nav .cooperation:hover .cooperationList {
  display: block;
}

.nav .cooperation {
  position: relative;
}
.nav .cooperation ul {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 40px;
}

/* 4 */
.nav .rulesList {
  display: none;
}
.nav .rules:hover .rulesList {
  display: block;
}

.headerSecond .rules {
  position: relative;
}
.headerSecond .rules ul {
  position: absolute;
  top: 40px;
  right: 0px;
  width: 100%;
  z-index: 10;
}
/* 5 */
.nav .navList {
  display: none;
}

.nav .nav:hover .navList {
  display: block;
}

.nav .nav:hover .navList {
  width: 1200px;
  padding: 30px 36px 36px 47px;
  border-top-left-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
  border-color: #e5e5e5;
  box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
  display: flex;
  justify-content: space-around;
}
.nav .nav:hover .navList .poneApp div {
  display: flex;
}
.nav .nav:hover .navList .poneApp img {
  width: 60px;
  height: 60px;
}
.nav .nav {
  position: relative;
}
.nav .nav .navList {
  position: absolute;
  right: 0;
  top: 40px;
  z-index: 999999;
}

/* 酒店旅行 */
.nav .navList .jiudian {
  width: 234px;
}
.nav .navList .jiudian div,
.nav .navList .meishi div {
  display: flex;
  flex-wrap: wrap;
}
.nav .navList .meishi div dd {
  width: 78px;
}
.nav .navList .jiudian div dd {
  width: 78px;
}
/* 吃美食 */
.nav .navList .meishi {
  width: 156px;
}
.nav .navList .meihsi div dd {
  width: 78px;
}

/* 看电影*/
.nav .navList .dianying {
  width: 90px;
}
.nav .navList dl {
  margin-right: 47px;
}
.nav .navList dl dt {
  margin-bottom: 25px;
}
.nav .navList dl dd {
  padding: 5px 0;
}
dt {
  font-size: 14px;
  color: #222222;
  font-weight: 500;
}
</style>
